<template>
	<el-dialog :title="flag==1? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" @close="closeDialog">
		<el-form :model="dataForm" :rules="dataRules" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px" size="small">
			<el-form-item label="菜单级别" prop="level">
				<el-radio-group v-model="dataForm.level">
					<el-radio :disabled="flag==1?false:true" :label="0">菜单</el-radio>
					<el-radio :disabled="flag==1?false:true" :label="1">目录</el-radio>
					<el-radio :disabled="flag==1?false:true" :label="2">按钮</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="父级菜单" prop="parentName">
				<el-popover ref="menuListPopover" :disabled="flag==1?false:true" placement="bottom-start" trigger="click" width="180">
					<el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" @current-change="menuListTreeCurrentChangeHandle"
					 :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false">
					</el-tree>
				</el-popover>
				<el-input v-model="dataForm.parentName" :disabled="flag==1?false:true" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级菜单" style="width: 90%;">
				</el-input>
			</el-form-item>
			<el-form-item label="菜单名称" prop="menuName">
				<el-input v-model="dataForm.menuName" placeholder="菜单名称" style="width: 90%;"></el-input>
			</el-form-item>
			<el-form-item label="url路径">
				<el-input v-model="dataForm.url" placeholder="url路径" style="width: 90%;"></el-input>
			</el-form-item>
			<el-form-item label="权限路径">
				<el-input v-model="dataForm.permissionUrl" placeholder="权限路径" style="width: 90%;"></el-input>
			</el-form-item>
			<el-form-item label="备注">
				<el-input v-model="dataForm.remark" placeholder="备注" style="width: 90%;"></el-input>
			</el-form-item>
			<el-form-item label="状态" v-if="flag==2">
				<el-radio-group v-model="dataForm.status">
					<el-radio :label="0">不可用</el-radio>
					<el-radio :label="1">可用</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false" size="small">取消</el-button>
			<el-button type="primary" @click="dataFormSubmit()" size="small">确定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import {
		getMenuList,
		getMenuInfo,
		addMenu,
		updateMenu
	} from '@/api/system/menu/menu.js'
	export default {
		created: function() {

		},
		mounted: function() {
			this.getParentMenuList()
		},
		data() {
			return {
				visible: false,
				dataForm: {
					//这里一定要先给初始值，不然menuListTreeCurrentChangeHandle()无法赋值
					menuId: '',
					parentName: '',
					parentId: '',
					menuName: '',
					url: '',
					permissionUrl: '',
					remark: '',
					level:'',
					status:'',
				},
				flag: '',
				menuList: [],
				menuListTreeProps: {
					label: 'menuName',
					children: 'child',
				},
				dataRules: {
					parentName: [
					    { required: true, message: '请选择上级菜单', trigger: 'change' }
					],
					menuName:[
						{required: true, message: '菜单名不能为空', trigger: 'blur'}
					],
					level:[
						{required: true, message: '请选择菜单等级', trigger: 'blur'}
					]
					
				}
			}
		},
		methods: {
			init(id, flag) {
				this.visible = true
				this.flag = flag
				if (flag == 1) {
					//alert(1)
				} else {
					getMenuInfo(id).then(data => {
						//console.log(data.data)
						this.dataForm.menuId = data.data.menuId
						this.dataForm.parentName = data.data.parentName == '' ? '一级菜单' : data.data.parentName
						this.dataForm.parentId = data.data.parentId
						this.dataForm.menuName = data.data.menuName
						this.dataForm.url = data.data.url
						this.dataForm.permissionUrl = data.data.permissionUrl
						this.dataForm.remark = data.data.remark
						this.dataForm.level = data.data.level
						this.dataForm.status = data.data.status
						this.menuListTreeSetCurrentNode()
					})
				}
			},
			dataFormSubmit(){
				this.$refs['dataForm'].validate((valid)=>{
					if(valid){
						if(this.flag==1){
							addMenu(this.dataForm.menuName,this.dataForm.parentId,this.dataForm.level,
							this.dataForm.permissionUrl,this.dataForm.remark,this.dataForm.url).then(data=>{
								if(data.code=='0000'){
									this.$message.success(data.msg)
									this.visible = false
									this.$emit('refreshDataList')
								}else{
									this.$message.error(data.msg)
								}
							})
						}else{
							//console.log(this.dataForm)
							updateMenu(this.dataForm.menuId,this.dataForm.menuName,this.dataForm.permissionUrl,
							this.dataForm.remark,this.dataForm.url,this.dataForm.status).then(data=>{
								if(data.code=='0000'){
									this.$message.success(data.msg)
									this.visible = false
									this.$emit('refreshDataList')
								}else{
									this.$message.error(data.msg)
								}
							}) 
						}
					}
				})
				
			},
			closeDialog() {
				this.dataForm = {
					//这里一定要先给初始值，不然menuListTreeCurrentChangeHandle()无法赋值
					menuId: '',
					parentName: '',
					parentId: '',
					menuName: '',
					url: '',
					permissionUrl: '',
					remark: '',
					level: '',
					status:'',
				}
			},
			getParentMenuList() {
				getMenuList(null, 1, null, 'parent').then(data => {
					this.menuList = data.data
					//console.log(data.data)
				})
			},
			// 菜单树选中
			menuListTreeCurrentChangeHandle(data, node) {
				this.dataForm.parentId = data.menuId
				this.dataForm.parentName = data.menuName
				//alert(data.menuName)
				//alert(this.dataForm.parentName)
				//console.log(node)
			},
			// 菜单树设置当前选中节点
			menuListTreeSetCurrentNode() {
				this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId)
				//this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
			},
		}
	}
</script>

<style>
</style>
